<template>
  <div class="drift-bottle-main">
    <!-- 顶部标题栏 -->
    <header class="header">
      <div class="header-content">
        <div><!-- 占位元素，保持左侧平衡 --></div>
        <h1 class="page-title">漂流瓶广场</h1>
        <div class="header-actions">
          <button class="action-btn fish-btn" @click="fishBottle">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            捞瓶子
          </button>
          <button class="action-btn throw-btn" @click="showThrowModal = true">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
            扔瓶子
          </button>
        </div>
      </div>
    </header>

    <!-- 主内容区域 -->
    <main class="main-content">
      <!-- 背景装饰 -->
      <div class="background-decoration">
        <div class="wave wave-1"></div>
        <div class="wave wave-2"></div>
        <div class="wave wave-3"></div>
      </div>

      <!-- 漂流瓶列表 -->
      <div class="bottles-container">
        <div 
          v-for="bottle in bottles" 
          :key="bottle.id"
          class="bottle-item"
          :class="{ 'expanded': expandedBottle === bottle.id }"
          :style="{ 
            '--top': bottle.randomTop,
            '--left': bottle.randomLeft,
            '--x1': bottle.x1,
            '--y1': bottle.y1,
            '--x2': bottle.x2,
            '--y2': bottle.y2,
            '--x3': bottle.x3,
            '--y3': bottle.y3
          }"
          @click="toggleBottle(bottle.id)"
        >
          
          <!-- 头像（初始状态） -->
          <div class="avatar-container" v-if="expandedBottle !== bottle.id">
            <img :src="bottle.avatar" :alt="bottle.username" class="user-avatar" />
            <div class="avatar-glow"></div>
          </div>

          <!-- 展开的详细信息 -->
          <div class="bottle-details" v-if="expandedBottle === bottle.id">
            <div class="bottle-header">
              <img :src="bottle.avatar" :alt="bottle.username" class="detail-avatar" />
              <div class="user-info">
                <h3 class="username">{{ bottle.username }}</h3>
                <span class="distance">{{ bottle.distance }}km</span>
              </div>
              <button class="close-btn" @click.stop="expandedBottle = null">×</button>
            </div>
            
            <div class="bottle-content">
              <p class="message">{{ bottle.message }}</p>
              <div class="tags">
                <span v-for="tag in bottle.tags" :key="tag" class="tag">{{ tag }}</span>
              </div>
              <div class="meta-info">
                <span class="time">{{ bottle.timeAgo }}</span>
                <span class="location">{{ bottle.location }}</span>
              </div>
            </div>
            
            <div class="bottle-actions">
              <button class="action-button reply-btn">
                <span class="action-icon">💬</span>
                回复
              </button>
              <button class="action-button like-btn" :class="{ 'liked': bottle.isLiked }" @click.stop="toggleLike(bottle.id)">
                <span class="action-icon">{{ bottle.isLiked ? '❤️' : '🤍' }}</span>
                {{ bottle.likes }}
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部操作栏 -->
      <div class="bottom-actions">
        <button class="bottom-btn" @click="refreshBottles">
          <span class="btn-icon">🔄</span>
          刷新
        </button>
      </div>
    </main>

    <!-- 扔瓶子模态框 -->
    <div v-if="showThrowModal" class="modal-overlay" @click="showThrowModal = false">
      <div class="throw-modal" @click.stop>
        <h3>扔一个瓶子</h3>
        <textarea 
          v-model="newBottleContent" 
          placeholder="分享你的运动心得或寻找运动伙伴..."
          maxlength="200"
        ></textarea>
        <div class="modal-actions">
          <button class="cancel-btn" @click="showThrowModal = false">取消</button>
          <button class="confirm-btn" @click="throwBottle" :disabled="!newBottleContent.trim()">扔出去</button>
        </div>
      </div>
    </div>

    <!-- 捞瓶子模态框 -->
    <div v-if="showFishModal" class="modal-overlay" @click="showFishModal = false">
      <div class="fish-modal" @click.stop>
        <div class="fish-animation" v-if="isFishing">
          <div class="fishing-rod">
            <div class="rod-line"></div>
            <div class="hook">🎣</div>
          </div>
          <div class="water-waves">
            <div class="wave"></div>
            <div class="wave"></div>
            <div class="wave"></div>
          </div>
          <p class="fishing-text">正在捞瓶子...</p>
        </div>
        
        <div class="caught-bottle" v-if="caughtBottle && !isFishing">
          <div class="bottle-animation">
            <div class="bottle-icon">🍶</div>
            <div class="sparkles">
              <span class="sparkle">✨</span>
              <span class="sparkle">⭐</span>
              <span class="sparkle">💫</span>
            </div>
          </div>
          <h3>恭喜！你捞到了一个瓶子</h3>
          <div class="bottle-content-card">
            <div class="bottle-header">
              <img :src="caughtBottle.avatar" :alt="caughtBottle.username" class="caught-avatar" />
              <div class="caught-info">
                <h4>{{ caughtBottle.username }}</h4>
                <span class="caught-distance">{{ caughtBottle.distance }}km</span>
              </div>
            </div>
            <p class="caught-message">{{ caughtBottle.message }}</p>
            <div class="caught-tags">
              <span v-for="tag in caughtBottle.tags" :key="tag" class="caught-tag">{{ tag }}</span>
            </div>
            <div class="caught-meta">
              <span>{{ caughtBottle.timeAgo }}</span>
              <span>来自 {{ caughtBottle.location }}</span>
            </div>
          </div>
          <div class="fish-modal-actions">
            <button class="reply-btn" @click="replyToBottle">回复</button>
            <button class="like-btn" @click="likeBottle">点赞 ❤️</button>
            <button class="close-btn" @click="closeFishModal">关闭</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

// 导入头像图片
import avatarChenyundong from '@/assets/images/avatar_chenyundong.png'
import avatarLiyujia from '@/assets/images/avatar_liyujia.png'
import avatarWangqixing from '@/assets/images/avatar_wangqixing.png'
import avatarZhangjianshen from '@/assets/images/avatar_zhangjianshen.png'
import avatarZhaoyouyong from '@/assets/images/avatar_zhaoyouyong.png'
import avatarLinpaobu from '@/assets/images/avatar_linpaobu.png'
import avatarSunquanji from '@/assets/images/avatar_sunquanji.png'

const router = useRouter()

// 响应式数据
const expandedBottle = ref(null)
const showThrowModal = ref(false)
const showFishModal = ref(false)
const newBottleContent = ref('')
const isFishing = ref(false)
const caughtBottle = ref(null)
const receivedBottles = ref([])

// 模拟数据 - 增加更多随机数据
const bottles = ref([])

// 生成随机位置和数据
const generateRandomBottles = () => {
  const names = ['陈运动', '李瑜伽', '王骑行', '张健身', '赵游泳', '林跑步', '孙拳击', '周篮球', '吴足球', '郑网球', '黄滑板', '徐攀岩']
  const messages = [
    '坚持晨跑100天,寻找同行者!',
    '想找人一起练习瑜伽,互相监督!',
    '周末骑行约伴,环城线路!',
    '寻找健身房搭档,互相指导!',
    '寻找周末游泳伙伴,一起提升技术!',
    '准备秋季马拉松,找陪练!',
    '想找人一起练习拳击,互相切磋!',
    '篮球场上见,3v3约起来!',
    '足球爱好者,寻找队友!',
    '网球双打缺人,欢迎加入!',
    '滑板新手求带,一起进步!',
    '攀岩爱好者,寻找搭档!'
  ]
  const tags = [
    ['#跑步', '#晨练'], ['#瑜伽'], ['#骑行', '#周末'], ['#健身'], 
    ['#游泳', '#周末'], ['#跑步', '#马拉松'], ['#拳击'], ['#篮球'],
    ['#足球'], ['#网球'], ['#滑板'], ['#攀岩']
  ]
  const locations = ['体育中心', '公园', '健身房', '游泳馆', '篮球场', '足球场', '网球场', '攀岩馆']
  const avatars = [avatarChenyundong, avatarLiyujia, avatarWangqixing, avatarZhangjianshen, avatarZhaoyouyong, avatarLinpaobu, avatarSunquanji]

  const bottleData = []
  for (let i = 0; i < 12; i++) {
    // 生成随机位置
    const randomTop = Math.random() * 80 + 10; // 10% 到 90% 之间
    const randomLeft = Math.random() * 80 + 10; // 10% 到 90% 之间
    
    // 生成随机浮动路径
    const x1 = (Math.random() - 0.5) * 20 + 'px';
    const y1 = (Math.random() - 0.5) * 20 + 'px';
    const x2 = (Math.random() - 0.5) * 20 + 'px';
    const y2 = (Math.random() - 0.5) * 20 + 'px';
    const x3 = (Math.random() - 0.5) * 20 + 'px';
    const y3 = (Math.random() - 0.5) * 20 + 'px';
    
    bottleData.push({
      id: i + 1,
      username: names[i] || `用户${i + 1}`,
      message: messages[i] || `分享运动心得 ${i + 1}`,
      avatar: avatars[i % avatars.length],
      tags: tags[i] || ['#运动'],
      distance: (Math.random() * 10 + 0.1).toFixed(1),
      timeAgo: `${Math.floor(Math.random() * 24) + 1}小时前`,
      location: locations[Math.floor(Math.random() * locations.length)],
      likes: Math.floor(Math.random() * 50) + 1,
      isLiked: Math.random() > 0.7,
      // 随机位置用于定位
      randomTop: randomTop + '%',
      randomLeft: randomLeft + '%',
      // 随机浮动路径
      x1: x1,
      y1: y1,
      x2: x2,
      y2: y2,
      x3: x3,
      y3: y3
    })
  }
  bottles.value = bottleData
}

// 生成随机的捞瓶子数据池
const generateFishableBottles = () => {
  const fishNames = [
    '小明同学', '健身达人', '跑步小王子', '瑜伽女神', '游泳健将', '篮球高手', 
    '足球爱好者', '网球新手', '攀岩勇士', '滑板少年', '羽毛球选手', '乒乓球王',
    '健身教练', '马拉松跑者', '自行车骑士', '舞蹈爱好者', '太极大师', '拳击手',
    '登山者', '滑雪爱好者', '体操运动员', '举重选手', '跳水运动员', '田径选手'
  ]
  
  const fishMessages = [
    '今天跑了10公里，感觉超棒！谁要一起晨跑？',
    '瑜伽练习第30天，身心都得到了放松～',
    '刚学会游泳的自由泳，好有成就感！',
    '篮球3v3，还差一个人，有人来吗？',
    '第一次尝试攀岩，虽然累但是很刺激！',
    '每天坚持健身，已经看到马甲线了！',
    '足球世界杯看得热血沸腾，约球！',
    '网球双打找搭档，男女不限～',
    '滑板摔了好多次，但还是想继续练！',
    '羽毛球打了2小时，出了好多汗！',
    '乒乓球技术有所提升，求高手指点！',
    '太极拳练了一个月，感觉气质都变了',
    '拳击训练真的很解压，推荐给大家！',
    '登山看日出，累并快乐着！',
    '滑雪季到了，准备去长白山！',
    '体操动作终于标准了，开心！',
    '举重突破个人记录，太激动了！',
    '跳水练习，克服了恐高症！',
    '田径训练，速度有明显提升！',
    '舞蹈课学了一支新舞，超美的！',
    '骑行50公里，风景超美！',
    '马拉松训练中，目标是完赛！',
    '健身房新开了普拉提课程，好想试试！',
    '和朋友一起运动，动力满满！'
  ]
  
  const fishTags = [
    ['#跑步', '#晨练'], ['#瑜伽', '#冥想'], ['#游泳', '#自由泳'], ['#篮球', '#3v3'],
    ['#攀岩', '#挑战'], ['#健身', '#马甲线'], ['#足球', '#世界杯'], ['#网球', '#双打'],
    ['#滑板', '#练习'], ['#羽毛球', '#出汗'], ['#乒乓球', '#技术'], ['#太极', '#气质'],
    ['#拳击', '#解压'], ['#登山', '#日出'], ['#滑雪', '#长白山'], ['#体操', '#标准'],
    ['#举重', '#记录'], ['#跳水', '#恐高'], ['#田径', '#速度'], ['#舞蹈', '#优美'],
    ['#骑行', '#风景'], ['#马拉松', '#完赛'], ['#普拉提', '#课程'], ['#团队', '#动力']
  ]
  
  const fishLocations = [
    '体育中心', '公园', '健身房', '游泳馆', '篮球场', '足球场', '网球场', '攀岩馆',
    '滑板公园', '羽毛球馆', '乒乓球室', '太极广场', '拳击俱乐部', '登山步道',
    '滑雪场', '体操馆', '举重室', '跳水馆', '田径场', '舞蹈室', '自行车道', '马拉松赛道'
  ]
  
  const avatars = [avatarChenyundong, avatarLiyujia, avatarWangqixing, avatarZhangjianshen, avatarZhaoyouyong, avatarLinpaobu, avatarSunquanji]
  
  const fishableData = []
  for (let i = 0; i < fishNames.length; i++) {
    fishableData.push({
      id: 1000 + i,
      username: fishNames[i],
      message: fishMessages[i],
      avatar: avatars[i % avatars.length],
      tags: fishTags[i] || ['#运动'],
      distance: (Math.random() * 20 + 0.5).toFixed(1),
      timeAgo: `${Math.floor(Math.random() * 72) + 1}小时前`,
      location: fishLocations[i % fishLocations.length],
      likes: Math.floor(Math.random() * 100) + 1,
      isLiked: false
    })
  }
  
  return fishableData
}

// 函数


const toggleBottle = (id) => {
  expandedBottle.value = expandedBottle.value === id ? null : id
}

const toggleLike = (id) => {
  const bottle = bottles.value.find(b => b.id === id)
  if (bottle) {
    bottle.isLiked = !bottle.isLiked
    bottle.likes += bottle.isLiked ? 1 : -1
  }
}

const throwBottle = () => {
  if (newBottleContent.value.trim()) {
    // 这里可以调用API
    console.log('扔出瓶子:', newBottleContent.value)
    showThrowModal.value = false
    newBottleContent.value = ''
    // 可以添加成功提示
  }
}

const refreshBottles = () => {
  // 添加刷新动画效果
  const bottleElements = document.querySelectorAll('.bottle-item');
  bottleElements.forEach(bottle => {
    bottle.style.animation = 'none';
    bottle.style.transform = 'scale(0)';
    bottle.style.opacity = '0';
  });
  
  // 等待动画结束后重新生成瓶子
  setTimeout(() => {
    generateRandomBottles();
    
    // 等待DOM更新后添加出现动画
    setTimeout(() => {
      const newBottleElements = document.querySelectorAll('.bottle-item');
      newBottleElements.forEach(bottle => {
        bottle.style.transition = 'transform 0.5s ease, opacity 0.5s ease';
        bottle.style.transform = 'scale(1)';
        bottle.style.opacity = '1';
      });
      
      // 清除过渡效果，恢复正常的浮动动画
      setTimeout(() => {
        newBottleElements.forEach(bottle => {
          bottle.style.transition = '';
        });
      }, 500);
    }, 50);
  }, 300);
}

// 捞瓶子功能
const fishBottle = () => {
  showFishModal.value = true
  isFishing.value = true
  caughtBottle.value = null
  
  // 模拟捞瓶子的过程，2-4秒随机延迟
  const fishingTime = Math.random() * 2000 + 2000
  
  setTimeout(() => {
    // 从随机数据池中选择一个瓶子
    const fishableBottles = generateFishableBottles()
    const randomIndex = Math.floor(Math.random() * fishableBottles.length)
    caughtBottle.value = fishableBottles[randomIndex]
    
    // 保存到本地存储的收到瓶子列表
    try {
      let storedReceived = []
      const stored = localStorage.getItem('drift-bottle-received')
      if (stored) {
        storedReceived = JSON.parse(stored)
      }
      storedReceived.push({...caughtBottle.value, caughtAt: new Date()})
      localStorage.setItem('drift-bottle-received', JSON.stringify(storedReceived))
    } catch (error) {
      console.error('保存收到的瓶子失败:', error)
    }
    
    isFishing.value = false
  }, fishingTime)
}

// 关闭捞瓶子模态框
const closeFishModal = () => {
  showFishModal.value = false
  isFishing.value = false
  caughtBottle.value = null
}

// 回复捞到的瓶子
const replyToBottle = () => {
  // 这里可以实现回复功能
  console.log('回复瓶子:', caughtBottle.value)
  // 可以跳转到回复页面或显示回复框
  closeFishModal()
}

// 点赞捞到的瓶子
const likeBottle = () => {
  if (caughtBottle.value) {
    caughtBottle.value.isLiked = !caughtBottle.value.isLiked
    caughtBottle.value.likes += caughtBottle.value.isLiked ? 1 : -1
    console.log('点赞瓶子:', caughtBottle.value)
  }
}

onMounted(() => {
  generateRandomBottles()
})
</script>

<style scoped>
.drift-bottle-main {
  min-height: 100vh;
  background: linear-gradient(135deg, #2ECC71 0%, #27AE60 25%, #16A085 50%, #1ABC9C 75%, #2ECC71 100%);
  position: relative;
  overflow: hidden;
}

/* 头部样式 */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  font-weight: 700;
  color: white;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 1px;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.header-actions .action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fish-btn {
  background: rgba(52, 152, 219, 0.9);
  color: white;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.fish-btn:hover {
  background: rgba(41, 128, 185, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
}

.throw-btn {
  background: rgba(46, 204, 113, 0.9);
  color: white;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.throw-btn:hover {
  background: rgba(39, 174, 96, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4);
}

/* 主内容区域 */
.main-content {
  position: relative;
  min-height: calc(100vh - 80px);
  padding: 20px;
}

/* 背景装饰 */
.background-decoration {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.wave {
  position: absolute;
  width: 200%;
  height: 200px;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border-radius: 50%;
  animation: wave 25s infinite linear;
  box-shadow: 0 0 50px rgba(255, 255, 255, 0.1);
}

.wave-1 {
  top: 10%;
  left: -50%;
  animation-delay: 0s;
}

.wave-2 {
  top: 40%;
  right: -50%;
  animation-delay: -7s;
}

.wave-3 {
  bottom: 20%;
  left: -30%;
  animation-delay: -14s;
}

@keyframes wave {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 瓶子容器 */
.bottles-container {
  position: relative;
  z-index: 10;
  max-width: 1000px;
  margin: 0 auto;
  min-height: 600px;
}

.bottle-item {
  position: absolute;
  top: var(--top);
  left: var(--left);
  animation: float 6s ease-in-out infinite;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.bottle-item:hover {
  transform: scale(1.1);
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(var(--x1), var(--y1));
  }
  50% {
    transform: translate(var(--x2), var(--y2));
  }
  75% {
    transform: translate(var(--x3), var(--y3));
  }
}

.bottle-item.expanded {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1000;
}


/* 头像容器 */
.avatar-container {
  position: relative;
  width: 60px;
  height: 60px;
}

.user-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.avatar-glow {
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2));
  opacity: 0;
  transition: all 0.4s ease;
  z-index: -1;
  filter: blur(2px);
}

.bottle-item:hover .avatar-glow {
  opacity: 1;
  animation: pulse 2s infinite;
}

.bottle-item:hover .user-avatar {
  transform: scale(1.1);
  border-color: rgba(255, 255, 255, 1);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* 详细信息 */
.bottle-details {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  min-width: 320px;
  max-width: 400px;
  animation: expandIn 0.3s ease-out;
  position: relative;
  margin: 20px;
}

@keyframes expandIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.bottle-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  position: relative;
}

.detail-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.user-info {
  flex: 1;
}

.username {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 4px 0;
}

.distance {
  font-size: 12px;
  color: #6c757d;
}

.close-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 32px;
  height: 32px;
  border: none;
  background: #ff6b6b;
  color: white;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
  transition: all 0.2s ease;
  z-index: 10;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
}

.close-btn:hover {
  background: #ff5252;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
}

.bottle-content .message {
  font-size: 14px;
  color: #495057;
  line-height: 1.5;
  margin-bottom: 12px;
}

.tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.tag {
  background: #E8F5E8;
  color: #2ECC71;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  border: 1px solid #D4F1D4;
}

.meta-info {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #6c757d;
  margin-bottom: 16px;
}

.bottle-actions {
  display: flex;
  gap: 12px;
}

.action-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid #dee2e6;
  background: white;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-button:hover {
  background: #f8f9fa;
}

.like-btn.liked {
  background: #ffe6e6;
  border-color: #ff6b6b;
  color: #ff6b6b;
}

/* 底部操作栏 */
.bottom-actions {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 12px;
  z-index: 100;
}

.bottom-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #2c3e50;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bottom-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.95);
}

.btn-icon {
  font-size: 18px;
}

/* 模态框 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.throw-modal {
  background: white;
  border-radius: 16px;
  padding: 24px;
  min-width: 400px;
  max-width: 500px;
}

.throw-modal h3 {
  margin: 0 0 16px 0;
  color: #2c3e50;
}

.throw-modal textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  font-size: 14px;
  resize: vertical;
  margin-bottom: 16px;
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.cancel-btn, .confirm-btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid #dee2e6;
}

.cancel-btn {
  background: white;
  color: #6c757d;
}

.confirm-btn {
  background: #2ECC71;
  color: white;
  border-color: #2ECC71;
}

.confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 捞瓶子模态框样式 */
.fish-modal {
  background: white;
  border-radius: 20px;
  padding: 30px;
  min-width: 400px;
  max-width: 500px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* 捞瓶子动画 */
.fish-animation {
  padding: 40px 20px;
}

.fishing-rod {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
}

.rod-line {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 2px;
  height: 60px;
  background: #8B4513;
  transform: translateX(-50%);
  animation: fishingLine 2s ease-in-out infinite;
}

.hook {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  animation: fishingHook 2s ease-in-out infinite;
}

@keyframes fishingLine {
  0%, 100% { height: 60px; }
  50% { height: 80px; }
}

@keyframes fishingHook {
  0%, 100% { transform: translateX(-50%) translateY(0px); }
  50% { transform: translateX(-50%) translateY(20px); }
}

.water-waves {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
}

.water-waves .wave {
  width: 20px;
  height: 20px;
  background: #3498DB;
  border-radius: 50%;
  animation: wave 1.5s ease-in-out infinite;
}

.water-waves .wave:nth-child(1) { animation-delay: 0s; }
.water-waves .wave:nth-child(2) { animation-delay: 0.3s; }
.water-waves .wave:nth-child(3) { animation-delay: 0.6s; }

@keyframes wave {
  0%, 100% { transform: scale(1) translateY(0); opacity: 0.7; }
  50% { transform: scale(1.2) translateY(-10px); opacity: 1; }
}

.fishing-text {
  font-size: 18px;
  color: #2c3e50;
  margin: 20px 0;
  animation: pulse 1.5s ease-in-out infinite;
}

/* 捞到瓶子的样式 */
.caught-bottle {
  animation: slideInUp 0.5s ease-out;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bottle-animation {
  position: relative;
  margin: 20px 0;
}

.bottle-icon {
  font-size: 60px;
  animation: bounce 0.8s ease-in-out;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-20px); }
  60% { transform: translateY(-10px); }
}

.sparkles {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.sparkle {
  position: absolute;
  font-size: 20px;
  animation: sparkle 2s ease-in-out infinite;
}

.sparkle:nth-child(1) {
  top: -40px;
  left: -30px;
  animation-delay: 0s;
}

.sparkle:nth-child(2) {
  top: -30px;
  right: -30px;
  animation-delay: 0.5s;
}

.sparkle:nth-child(3) {
  bottom: -40px;
  left: -20px;
  animation-delay: 1s;
}

@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1); }
}

.bottle-content-card {
  background: linear-gradient(135deg, #f0f9f4 0%, #e8f5e8 100%);
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  text-align: left;
}

.bottle-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.caught-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.caught-info h4 {
  margin: 0;
  font-size: 16px;
  color: #2c3e50;
}

.caught-distance {
  font-size: 12px;
  color: #6c757d;
}

.caught-message {
  font-size: 14px;
  color: #495057;
  line-height: 1.5;
  margin: 12px 0;
}

.caught-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.caught-tag {
  background: #E8F5E8;
  color: #2ECC71;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  border: 1px solid #D4F1D4;
}

.caught-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #6c757d;
}

.fish-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

.fish-modal-actions button {
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.reply-btn {
  background: #3498DB;
  color: white;
}

.reply-btn:hover {
  background: #2980B9;
}

.like-btn {
  background: #E74C3C;
  color: white;
}

.like-btn:hover {
  background: #C0392B;
}

.close-btn {
  background: #95A5A6;
  color: white;
}

.close-btn:hover {
  background: #7F8C8D;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content {
    padding: 10px;
  }
  
  .bottle-details {
    min-width: 280px;
    max-width: 90vw;
  }
  
  .throw-modal {
    min-width: 300px;
    max-width: 90vw;
    margin: 20px;
  }
  
  .bottles-container {
    min-height: 400px;
  }
}
</style>
